// src/components/Button/style.less
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  outline: none;
  
  // 类型样式
  &.btn-default {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #d9d9d9;
    
    &:hover:not(.btn-disabled) {
      border-color: #4096ff;
      color: #4096ff;
    }
  }
  
  &.btn-primary {
    background-color: #1890ff;
    color: #ffffff;
    border: 1px solid #1890ff;
    
    &:hover:not(.btn-disabled) {
      background-color: #40a9ff;
      border-color: #40a9ff;
    }
  }
  
  &.btn-dashed {
    background-color: #ffffff;
    color: #333333;
    border: 1px dashed #d9d9d9;
    
    &:hover:not(.btn-disabled) {
      border-color: #4096ff;
      color: #4096ff;
    }
  }
  
  &.btn-text {
    background-color: transparent;
    color: #1890ff;
    border: none;
    
    &:hover:not(.btn-disabled) {
      background-color: rgba(0, 0, 0, 0.06);
    }
  }
  
  &.btn-link {
    background-color: transparent;
    color: #1890ff;
    border: none;
    
    &:hover:not(.btn-disabled) {
      color: #40a9ff;
    }
  }
  
  // 尺寸样式
  &.btn-small {
    padding: 4px 8px;
    font-size: 12px;
    height: 24px;
  }
  
  &.btn-medium {
    padding: 6px 12px;
    font-size: 14px;
    height: 32px;
  }
  
  &.btn-large {
    padding: 8px 16px;
    font-size: 16px;
    height: 40px;
  }
  
  // 形状样式
  &.btn-circle {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    
    &.btn-small {
      width: 24px;
      height: 24px;
    }
    
    &.btn-large {
      width: 40px;
      height: 40px;
    }
  }
  
  &.btn-round {
    border-radius: 32px;
  }
  
  // 状态样式
  &.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    
    &.btn-default,
    &.btn-dashed {
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, 0.25);
      border-color: #d9d9d9;
    }
    
    &.btn-primary {
      background-color: #1890ff;
      border-color: #1890ff;
    }
    
    &.btn-text,
    &.btn-link {
      background-color: transparent;
      color: rgba(0, 0, 0, 0.25);
    }
  }
  
  &.btn-loading {
    cursor: wait;
  }
  
  &.btn-danger {
    &.btn-primary {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      
      &:hover:not(.btn-disabled) {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
    
    &.btn-default,
    &.btn-dashed {
      color: #ff4d4f;
      border-color: #ff4d4f;
      
      &:hover:not(.btn-disabled) {
        color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
  
  .btn-loading-icon {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}